<!--
 * @由于个人水平有限, 难免有些错误, 还请指点:  
 * @Author: cpu_code
 * @Date: 2020-10-20 23:19:46
 * @LastEditTime: 2020-10-21 16:39:53
 * @FilePath: \web\javascript\select_forms\select_forms.html
 * @Gitee: [https://gitee.com/cpu_code](https://gitee.com/cpu_code)
 * @Github: [https://github.com/CPU-Code](https://github.com/CPU-Code)
 * @CSDN: [https://blog.csdn.net/qq_44226094](https://blog.csdn.net/qq_44226094)
 * @Gitbook: [https://923992029.gitbook.io/cpucode/](https://923992029.gitbook.io/cpucode/)
-->
<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>表格选择</title>
    
        <style>
            table{
                border: 1px solid;
                width: 500px;
                margin-left: 30%;
            }

            td,th{
                text-align: center;
                border: 1px solid;
            }

            div{
                margin-top: 10px;
                margin-left: 30%;
            }

            .out{
                background-color: white;
            }

            .over{
                background-color: pink;
            }
        </style>

        <script>
            /*
            分析：
                1.全选：
                    * 获取所有的checkbox
                    * 遍历cb，设置每一个cb的状态为选中  checked
            */
            
            //1.在页面加载完后绑定事件
            window.onload = function(){
                //2.给全选按钮绑定单击事件
                document.getElementById("selectAll").onclick = function(){
                    //全选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为选中  checked
                        cbs[i].checked = true;
                    }
                }

                document.getElementById("unSelectAll").onclick = function(){
                    //全不选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为未选中  checked
                        cbs[i].checked = false;
                    }
                }

                document.getElementById("selectRev").onclick = function(){
                    //反选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为相反
                        cbs[i].checked = !cbs[i].checked;
                    }
                }

                document.getElementById("firstCb").onclick = function(){
                    //第一个cb点击
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //获取第一个cb
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态和第一个cb的状态一样
                        cbs[i].checked = this.checked;
                    }
                }

                //给所有tr绑定鼠标移到元素之上和移出元素事件
                var trs = document.getElementsByTagName("tr");

                //2.遍历
                for(var i = 0; i < trs.length; i++){

                    //移到元素之上
                    trs[i].onmouseover = function(){
                        this.className = "over";
                    }

                    //移出元素
                    trs[i].onmouseout = function(){
                        this.className = "out";
                    }
                }
            }
        </script>
    </head>

    <body>
        <table>
            <caption>学生表格</caption>
            <tr>
                <th><input type="checkbox" name="cb" id="firstCb"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>

            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>1</td>
                <td>cpucode</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>2</td>
                <td>cpu</td>
                <td>女</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>3</td>
                <td>哈哈哈</td>
                <td>?</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
        </table>

        <div>
            <input type="button" id="selectAll" value="全选">
            <input type="button" id="unSelectAll" value="全部不选">
            <input type="button" id="selectRev" value="反选">
        </div>
    </body>

</html>